<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.tab{
		width: 600px;
		height: 400px;
		border: 3px solid blue;
		margin: 0 auto;
		font-family: 微软雅黑;
		position: relative;
	}
	.tab ul li{
		width: 150px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		list-style: none;
		float: left;
		margin: 0 10px;
		font-size: 30px;
		color: white;
	}
	.tab .news{
		width: 560px;
		height: 300px;
		position: absolute;
		top: 80px;
		left: 20px;
		text-align: center;
		line-height: 300px;
		font-size: 80px;
		color: white;
		font-weight: 800;
		display: none;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.tab ul li').mouseover(function(){
		var index = $(this).index();//获得当前点击的li的序号
		/*$(this).parent('ul').siblings('.news').eq(index).show();
		$(this).parent('ul').siblings('.news').eq(index).siblings('.news').hide();*/
		$('.tab .news').eq(index).show();//让对应序号的div显示
		$('.tab .news').eq(index).siblings('.news').hide();//让对应序号的div的兄弟div隐藏
	})
})
</script>

</head>

<body>
	<div class="tab">
		<ul>
			<li style="background:green;">新闻</li>
			<li style="background:purple;">娱乐</li>
			<li style="background:orange;">体育</li>
		</ul>
		<div class="news" style="background:green;display:block;">新闻内容</div>
		<div class="news" style="background:purple;">娱乐内容</div>
		<div class="news" style="background:orange;">体育内容</div>
	</div>
	
</body>
</html>
